<script setup>
import CommentReplyItem from '@/components/common/comment/CommentReplyItem.vue'
import { formatNumber } from '@/utils/index.js'

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  authorId: {
    type: Number,
    default: 1,
  },
})

const emit = defineEmits(['updateItem'])

// 获取全部评论
function getAll(currentLastId) {
  console.log('获取全部子评论', currentLastId)

  const newComment = [
    {
      from: {
        id: 1,
        nickName: '异常君',
        avatar:
          'https://p9-passport.byteacctimg.com/img/user-avatar/a1d4a2ba5ad56ddda511fe655a65cc37~90x90.awebp',
        job: '后端研发',
        fansCount: 10,
        attentionCount: 20,
      },
      content: '今年9月就会出下一个java25的lts版本。此篇文章会有更新吗',
      type: 1, // 一级评论 二级评论
      date: '1月前',
      likeCount: 0,
      isLike: false,
      commentCount: 0,
      picList: [
        'https://p26-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/5f67bd9b5eb34b51be175793051cf12b~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5rKJ6buY546L6LSw:q75.awebp?rk3s=f64ab15b&x-expires=1745982520&x-signature=CyR6db2N9odtFueg70TGqMk56%2FE%3D',
        'https://p3-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/c918a1b3699e4f6ea62e76fcef4db6d8~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5byC5bi45ZCb:q75.awebp?rk3s=f64ab15b&x-expires=1745984372&x-signature=piqOOJRQS%2B5i5Y9i3z6OXlAMfKA%3D',
      ],
    },
    {
      isLast: true,
      from: {
        id: 5,
        nickName: '香肠狗',
        avatar:
          'https://p9-passport.byteacctimg.com/img/user-avatar/a1d4a2ba5ad56ddda511fe655a65cc37~90x90.awebp',
        job: '后端研发',
        fansCount: 10,
        attentionCount: 20,
      },
      content: '今年9月就会出下一个java25的lts版本。此篇文章会有更新吗',
      type: 1, // 一级评论 二级评论
      date: '1月前',
      likeCount: 0,
      isLike: false,
      commentCount: 0,
    },
  ]

  const newItem = {
    ...props.item,
    children: [...(props.item.children || []), ...newComment],
  }

  emit('updateItem', newItem)
}

// 点赞(一级评论)
function like() {
  const newItem = {
    ...props.item,
    likeCount: props.item.isLike
      ? props.item.likeCount - 1
      : props.item.likeCount + 1,
    isLike: !props.item.isLike,
  }

  emit('updateItem', newItem)
}

const showComment = ref(false)

// 更新子评论方法
function updateReplyItem(index, newItem) {
  const newChildren = [...props.item.children]
  newChildren[index] = newItem

  emit('updateItem', {
    ...props.item,
    children: newChildren,
  })
}
</script>

<template>
  <div class="min-h-100 flex">
    <!--        左侧 -->
    <div>
      <UserPopover show-arrow :info="item.from" trigger="hover" show-button>
        <el-avatar
          :src="item.from.avatar"
          alt="头像"
          class="mr-10 cursor-pointer"
        />
      </UserPopover>
    </div>
    <!--        右侧 -->
    <div class="flex-col flex-1 justify-start">
      <!--          名字 -->
      <div class="flex items-center">
        <UserPopover show-arrow :info="item.from" trigger="hover" show-button>
          <span class="line-clamp-1 max-w-100 cursor-pointer">
            {{ item.from.nickName }}
          </span>
        </UserPopover>
        <el-tag v-if="item.from.id === authorId" size="small" class="mx-5">
          作者
        </el-tag>
        <span class="line-clamp-1 ml-5 font-size-14 op-text line-height-100%">
          {{ item.from.job }}
        </span>
      </div>
      <div class="my-8 flex-col flex-1 gap-6">
        <!--          内容 -->
        <ContentCollapse :max-line="5" :content="item.content" />

        <div v-if="item.picList?.length">
          <el-image
            v-for="(url, index) in item.picList"
            :key="index"
            lazy
            show-progress
            :preview-src-list="item.picList"
            :initial-index="index"
            style="
              width: 100px;
              height: 100px;
              margin-right: 10px;
              display: inline-block;
            "
            :src="url"
            fit="cover"
            class="border-rd-5"
            :preview-teleported="true"
          />
        </div>

        <!--          信息 -->
        <div class="line-clamp-1 flex items-center op-text us">
          <span>{{ item.date }}</span>
          <div
            class="ml-20 flex items-center cursor-pointer-text-hover"
            @click="like"
          >
            <i
              class="i-fe:thumbs-up mr-3"
              :class="{ 'bg-primary': item.isLick }"
            />
            <span class="line-height-100%">
              {{ item.likeCount ? formatNumber(item.likeCount) : "点赞" }}
            </span>
          </div>
          <div
            class="ml-20 flex items-center cursor-pointer-text-hover"
            @click="showComment = !showComment"
          >
            <i class="i-fe:message-square mr-3" />
            <span class="line-height-100%">
              {{
                showComment
                  ? "取消回复"
                  : item.commentCount
                    ? formatNumber(item.commentCount)
                    : "评论"
              }}
            </span>
          </div>
        </div>

        <div v-if="showComment" class="py-8">
          <Comment :default-placeholder="`回复${item.from.nickName}...`" />
        </div>

        <!--          二级评论 -->
        <div v-if="item.children?.length" class="mt-10 flex-col gap-15">
          <div v-for="(child, index) in item.children" :key="index">
            <CommentReplyItem
              :item="child"
              :author-id="authorId"
              @update-item="(newItem) => updateReplyItem(index, newItem)"
            />
          </div>
          <div
            v-if="!item.children[item.children.length - 1].isLast"
            class="% ml-40 flex cursor-pointer items-center op-text us cursor-pointer-text-hover"
            @click="getAll(item.children[item.children.length - 1]?.id)"
          >
            查看全部 {{ item.allChildrenCount }} 条回复
            <i class="i-fe:chevron-down" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
